<template>
	<view class="box">
		<view class="nameAndTime">
			<text class="name">{{data.name}}</text>
			<text class="time">{{data.date}}</text>
		</view>
		<image src="../../static/queren-2.png" class="icon" mode="aspectFit"></image>
	</view>
</template>

<script setup>
import { defineProps } from 'vue';
defineProps({
	data:{
		type:Object,
		default(){
			return {
				myindex:0,
				name: "步骤名称",
				date: "2024-11-29",
				progress:10,
				description: "这是一个描述",
			}
		},
	},
})
</script>

<style lang="scss" scoped>
.icon{
	height: 100rpx;
	width: 100rpx;
}
.box{
	margin-top: 40rpx;
	width: 630rpx;
	height: 190rpx;
	opacity: 1;
	border-radius: 30rpx;
	align-items: center;
	justify-content: flex-start;
	display: flex;
	flex-direction: row;
	box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.25);
	.nameAndTime{
		display: flex;
		flex-direction: column;
		width: 464rpx;
		height: 140rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		.name{
			margin-left: 10rpx;
			font-size: 50rpx;
			font-weight: 525;
			letter-spacing: 1rpx;
			line-height: 52rpx;
			color: rgba(4, 6, 15, 1);
			text-align: left;
			vertical-align: middle;
		}
		.time{
			margin-left: 10rpx;
			margin-top: 10rpx;
			font-size: 40rpx;
			font-weight: 400;
			letter-spacing: 0.5rpx;
			color: rgba(98, 104, 121, 1);
			text-align: left;
		}
	}
}
</style>